<template>
	<view class="container">
		<view class="unite">
			<view>类型</view>
			<view style="display: flex;">
				<picker @change="bindPickerChange" :range="array" range-key="title">
					<view class="choise">{{type.title}}</view>
				</picker>
				<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<view class="unite">
			<view>开始时间</view>
			<view>
				<u-picker mode="time" v-model="show" :params="params" @confirm="begintime" :default-time="nowTime"></u-picker>
				<text class="choise" @click="show=true">{{startTime}}</text>
				<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<view class="unite" v-if="startTime!='请选择'">
			<view>结束时间</view>
			<view>
				<u-picker mode="time" v-model="show1" :params="params" @confirm="endtimefn" :default-time="nowTime"></u-picker>
				<text class="choise" @click="show1=true">{{endTime}}</text>
				<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<view class="unite">
			<view>输入联系方式</view>
			<view class="input-text">
				<input class="choise" type="number" placeholder="请输入联系电话" v-model="taskPhone"/>
			</view>
		</view>
		<view class="unite">
			<view>任务地址</view>
			<view>
				<text class="choise" @click="value=true">{{city}}</text>
				<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<view class="unite">
			<view>输入门牌号信息</view>
			<view class="input-text">
				<input class="choise" type="text" placeholder="请填写详细地址" v-model="taskAddress"/>
			</view>
		</view>
		<view class="unite">
			<view>打开地图定位服务地点</view>
			<view>
				<text class="choise" @click="map">{{address}}</text>
				<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<view class="unite">
			<view>输入具体的服务内容</view>
		</view>
		<textarea maxlength="-1" placeholder="输入服务类容" v-model="taskContent"></textarea>
		<view class="publish" @click="addtask">发布任务</view>
		<cityselect  v-model="value" @city-change="cityChange" @isshow="value=false"></cityselect>
	</view>
</template>

<script>
	import {fbtask,settask}from"../../api/user.js"
	import cityselect from"../../components/cityselect.vue"
	export default {
		data() {
			return {
				value:false,
				array: [{
						value: 0,
						title: '采购'
					},
					{
						value: 1,
						title: '家政'
					}
				],
				type: {
					value: 0,
					title: '请选择'
				},
				show: false,
				show1:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				jieshu:'请选择',
				nowTime:'',
				ktime:null,//开始的时间戳
				endtime:null,//结束的时间戳
				provinceId:"",//省份&
				cityId:"",//城市&
				areaId:"",//区域&
				streetId:"",//街道&
				taskAddress:"",//=任务地点&
				taskPhone:"",//任务联系方式&
				startTime:"请选择",//开始时间&endTime=结束时间&
				endTime:"请选择",
				taskContent:"",//任务内容&
				releaseType:null,//发布类型(0:采购，1:家政)
				city:"选择社区",
				isset:false,
				taskId:null,
				address:"打开地图",
				longitude:"",
				latitude:"",
			}
		},
		components:{
			cityselect,
		},
		onLoad(e) {
			if(e.data){
				let data=JSON.parse(e.data)
				console.log(data)
				this.provinceId=data.provinceId
				this.cityId=data.cityId
				this.areaId=data.areaId
				this.streetId=data.streetId
				this.taskAddress=data.taskAddress
				this.taskPhone=data.taskPhone
				this.startTime=data.startTime
				this.endTime=data.endTime
				this.taskContent=data.taskContent
				this.releaseType=data.releaseType
				this.type=this.array[this.releaseType]
				this.city=data.provinceName+"-"+data.cityName+"-"+data.areaName+"-"+data.streetName
				this.latitude=data.latitude
				this.longitude=data.longitude
				this.taskId=data.taskId
				this.isset=true
			}
		},
		onReady(){
			this.nowTime = this.$u.timeFormat((new Date()).getTime(), 'yyyy-mm-dd hh:MM:ss');
		},
		methods: {
			map(){
				uni.chooseLocation({
				    success:(res)=> {
						console.log(res)
						this.latitude=res.latitude
						this.longitude=res.longitude
						this.address=res.address
				    }
				});
			},
			// 选择类型
			bindPickerChange(e) {
				console.log(e)
				this.type = this.array[e.detail.value]
				this.releaseType=this.type.value
				console.log(this.releaseType)
			},
			// 选择开始时间
			begintime(r){
				console.log(r)
				let nowtime=(new Date().getTime().toString()).substr(0,10)*1000
				this.startTime=r.year+'-'+r.month+'-'+r.day+' '+r.hour+':'+r.minute
				let time=r.year+'-'+r.month+'-'+r.day+' '+r.hour+':'+r.minute+":59"
				let timestring=time.replace(/\-/g, "/")
				let sTime = (new Date(timestring)).getTime()
				this.ktime=sTime
				if(sTime<nowtime){
					this.msg("开始时间不能早于当前时间","none")
					setTimeout(()=>{this.show=true},1000)
				}
			},
			// 选择结束时间
			endtimefn(r){
				console.log(r)
				this.endTime=r.year+'-'+r.month+'-'+r.day+' '+r.hour+':'+r.minute
				let time=r.year+'-'+r.month+'-'+r.day+' '+r.hour+':'+r.minute+":59"
				let timestring=time.replace(/\-/g, "/")
				let sTime = (new Date(timestring)).getTime()
				if(sTime<this.ktime){
					this.msg("结束时间不能早于开始时间","none")
					setTimeout(()=>{this.show1=true},1000)
				}
			},
			cityChange(e) {
				// regionId
				this.city = e.province.name + '-' + e.city.name + '-' + e.area.name+ '-' + e.street.name;
				this.provinceId=e.province.regionId
				this.cityId=e.city.regionId
				this.areaId=e.area.regionId
				this.streetId=e.street.regionId
			},
			async addtask(){
				if(this.releaseType==null){
					this.msg("任务类型未选择","none")
					return
				}
				if(this.startTime=='请选择'){
					this.msg("开始时间未选择","none")
					return
				}
				if(this.endTime=='请选择'){
					this.msg("结束时间未选择","none")
					return
				}
				if(!this.$u.test.mobile(this.taskPhone)){
					this.msg("未填写正确的手机号","none")
					return
				}
				if(this.city=="选择社区"){
					this.msg("社区未选择","none")
					return
				}
				if(this.taskAddress.trim()==''){
					this.msg("详细地址未填写","none")
					return
				}
				if(this.taskContent.trim()==''){
					this.msg("服务类容未填写","none")
					return
				}
				if(this.address=="打开地图"){
					this.msg("地图定位未选择","none")
					return
				}
				let url=fbtask
				let data={
					provinceId:this.provinceId,
					cityId:this.cityId,
					areaId:this.areaId,
					streetId:this.streetId,
					taskAddress:this.taskAddress,
					taskPhone:this.taskPhone,
					startTime:this.startTime,
					endTime:this.endTime,
					taskContent:this.taskContent,
					releaseType:this.releaseType,
					latitude:this.latitude,
					longitude:this.longitude
				}
				if(this.isset==true){
					data.taskId=this.taskId
					url=settask
				}
				this.showMd('确认发布',()=>{
					this.get(url,data).then(res=>{
						this.msg("发布成功等待审核")
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500)
					})
				})
				
			}
		}
	}
</script>

<style>
	textarea{
		width: 100%;
		height: 400rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		border: 1px rgba(0,0,0,0.2) solid;
		box-sizing: border-box;
		
	}
	.container {
		padding: 50rpx 30rpx;
	}

	.unite {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 40rpx;
	}

	.choise {
		font-size: 30rpx;
		font-weight: 300;
		color: #666666;
		margin-right: 20rpx;
	}
	input{
		width: 400rpx;
	}

	.input-text {
		display: flex;
		text-align: right;
	}

	.publish {
		position: fixed;
		bottom: 65rpx;
		left: 30rpx;
		width: 690rpx;
		height: 88rpx;
		background: #F09238;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 88rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
